<template>
	<view>
		<view class="box">
			<view class="top">
				<view class="bt">
					快速问答
				</view>
				<view class="wenti" v-for="v in question" :key="v.id" @click="add(v.question)">
					{{v.question}}
				</view>
			</view>


			<view v-for="(v,i) in list" :key="v.id">
				<!-- 自己发送的 -->
				<view class="msgs " v-if="v.state ==0">
					<view class="content ">
						<view class="sj">
							{{v.timer}}
						</view>
						<view class="msg">
							{{v.text}}
						</view>
					</view>
					<view class="avater">
						<image src="/static/message/tu.png" mode=""></image>
					</view>
				</view>

				<!-- 别人发送的 -->
				<view class="msgs  other" v-else>
					<view class="avater">
						<image src="/static/message/tu.png" mode=""></image>
					</view>
					<view class="content ">
						<view class="sj">
							{{v.timer}}
						</view>
						<view class="tz">

							<view @click="add(v1)" class="tz" v-for="(v1,i1) in v.text" :key="i1">
								{{v1}}
							</view>

						</view>
					</view>
				</view>

				<!-- <view :class="{mine:item.type === 1}">66666</view> -->
				<!-- <view v-for="item in list" :key="item.id" class="item" :class="{mine:item.type === 0}">
				{{item.content}}
			</view> -->
				<!-- 		<view class="top">
				<view class="top-o">
					快速回答
				</view>
				<view class="xx">
					
				</view>
			</view>
			<view class="my">
				<view class="left">
					<view class="">
					今天14：39：06
					</view>
					<view class="">
						点我优惠
					</view>
				</view>
				
				<view class="ims">
					<image src="../../static/message/tu.png" mode=""></image>
				</view>
				
			</view>
			<view class="msg">
				
			</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		initquestion,
		questions
	} from "../../api/user.js"
	export default {
		data() {
			return {
				// list: [
				// 	{id:1, type: 0, content: 'aaa', time:'2023-04-06 20:15:00'},
				// 	{id:2, type: 1, content: 'bbb', time:'2023-04-06 20:15:00'},
				// 	{id:3, type: 0, content: 'ccc', time:'2023-04-06 20:15:00'},
				// 	{id:4, type: 1, content: 'ddd', time:'2023-04-06 20:15:00'},

				// ],
				question: [],
				list: []
			};
		},
		created() {
			this.gitinit()
		},
		methods: {
			async gitinit() {
				let res = await initquestion()
				// console.log(res);
				this.question = res.data
			},
			add(text) {


				let msg = {
					text: text,
					state: 0,
					timer: new Date().toLocaleString()
				}
				this.list.push(msg)

				let data = {
					question: text
				}
				questions(data).then(res => {

					let text = JSON.parse(res.data[0].ans.replace(/'/g, '"'))
					let msg = {
						text: text,
						state: 1,
						timer: new Date().toLocaleString()
					}
					this.list.push(msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 90%;
		margin: 0 auto;
		background: #ccc;
		display: flex;
		flex-direction: column;

		.top {
			padding: 30rpx;
			background: #fff;

			.bt {
				border-bottom: 1px solid #ccc;
			}

			.wenti {
				padding-left: 30rpx;
				border-bottom: 1px solid #ccc;
				line-height: 100rpx;
			}
		}

		// .item{
		// 	width: 70%;
		// 	background-color: #fff;
		// 	margin: 5px;
		// 	&.mine{
		// 		align-self: flex-end;
		// 	}
		// }






		.msgs {

			width: 90%;
			margin: 20rpx auto;
			justify-content: flex-end;
			display: flex;

			.avater {
				margin-left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}

			.sj {
				text-align: right;
				color: greenyellow;
			}

			.msg {
				background: pink;
				color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				text-align: right;

			}
		}

		.other {
			justify-content: flex-start;

			.content {
				width: 100%;
			}

			.sj {
				text-align: left;
				color: red;
			}

			.tz {
				width: 100%;
				margin: 0 auto;
				color: red;
				line-height: 60rpx;
			}
		}
	}
</style>